import { createApp } from 'vue'
// element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
// pinia
import { createPinia } from 'pinia'
// component
import Components from '@/components/index.js'
// vue-i18n
import { createI18n } from 'vue-i18n'
// locale
import enLocale from './locals/en.json'
import cnLocale from './locals/cn.json'

// main app
import App from './App.jsx'
// router
import router from './routers/index.js'
// store
import store from './store/index'
// css
import './static/base.less'

// 创建app应用
const app = createApp(App)
// pinia 实例
const pinia = createPinia()

// 更改全局配置
// 1. 错误异常处理
app.config.errorHandler = (err, vm, info) => {
  console.error(err, vm, info)
}
app.config.warnHandler = (err, vm, info) => {
  console.warn(err, vm, info)
}
// 2. 全局属性设置
app.config.globalProperties.$http = null
// 3. 编译配置项
app.config.compilerOptions.whitespace = 'preserve'

// 4. 国际化配置
const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh',
  messages: {
    en: {
      ...en,
      ...enLocale,
    },
    zh: {
      ...zhCn,
      ...cnLocale,
    },
  },
})

// 插件安装
// app.use()
// 路由配置
app.use(router)
// 全局状态管理
app.use(store)
// element
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale: zhCn })
// pinia use
app.use(pinia)
// 自定义全局组件
app.use(Components)
// 国际化
app.use(i18n)

app.mount('#app')
